<template>
  <div class="person">
    <h1>你好啊</h1>
    <h1>姓名：{{ name }}</h1>
    <h1>年龄：{{ age }}</h1>
    <button @click="showTel">查看联系方式</button>
    <button @click="changeName">改名</button>
    <button @click="changeAge">年龄增加</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
}
</script>
<!-- setup 语法糖 -->
<script lang="ts" setup>
console.log('@@', this) // setup 函数中的 this 是 undefined

let name = '张山' // 注意此时的 name 不是响应式的
let age = 20 // 注意此时的 age 不是响应式的
let tel = '13512345678' // 注意此时的 tel 不是响应式的

function changeName() {
  name = 'zhang -san' // 注意，这样修改 name, 虽然 name 的值变了，但是页面上不会变化，原因是 name 不是响应式的
}

function changeAge() {
  age += 1 // 注意，这样修改 age, 虽然 age 的值变了，但是页面上不会变化，原因是 age 不是响应式的
}

function showTel() {
  alert(tel)
}
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
}
button {
  margin: 0 5px;
}
</style>
